<template>
  <div class="dialog">
    <el-dialog
      :title="'来料入库记录'+titleText"
      :visible.sync="showDialog"
      width="35%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-form-item label="入库仓库	：" class="w100p" prop="warehouseId">
          <el-select
            v-model="formData.warehouseId"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in warehouseList"
              :key="index"
              :label="item.warehouseName"
              :value="item.warehouseId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="采购订单编号 ：" class="w100p" prop="purchaseOrderCode">
          <el-input
            v-model="formData.purchaseOrderCode"
            clearable
            placeholder="请输入采购订单编号"
          />
        </el-form-item>
        <el-form-item label="入库人 ：" class="w100p" prop="staffName">
          <el-select
            v-model="formData.staffName"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in staffList"
              :key="index"
              :label="item.staffName"
              :value="item.staffName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入库日期	：" class="w100p" prop="warehousingTime">
          <el-date-picker
              v-model="formData.warehousingTime"
              type="datetime"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
            />
        </el-form-item>
        <el-form-item label="采购物料 ：" class="w100p">
          <div v-if="nowChanceStau === 'add'" class="line-click" @click="addMaterial()">
            <i class="el-icon-plus"></i>
          </div>
          <div class="hang-content">
            <div
              v-for="(key, index) in BOList"
              :key="index + 'deviceCode'"
              class="hang-content-one"
            >
              <el-select
                v-model="key.materialId"
                clearable
                filterable
                placeholder="物料选择"
              >
                <el-option
                  v-for="(item, indexk) of materialList"
                  :key="item.materialId + 'material' + indexk"
                  :label="item.name"
                  :value="item.materialId"
                />
              </el-select>
              <el-input v-model="key.num" clearable placeholder="请填写数量" />
              <el-input
                v-model="key.price"
                clearable
                placeholder="请填写物料价格"
              />
              <div v-if="nowChanceStau === 'add'" class="line-click" @click="delMaterial(index)">
                <i class="el-icon-minus"></i>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import WarehouseApi from "@/api/warehouse-manage/warehouse"
import WarehousingApi from "@/api/warehouse-manage/warehousing"
import StaffApi from "@/api/basic-info-manage/staff";
import MaterialApi from "@/api/basic-info-manage/material"
import { dialogMixin } from "@/utils/dialogMixin";

export default {
  name: '',
  components: { },
  mixins: [dialogMixin],
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    nowChanceStau: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    editObject: {
      type: [Object],
      default: () => {
        return {}
      }
    }
  },
  data() {
    let checkInt = (rule, value, callback) => {
      if (value) {
        if (Number(value) && value % 1 === 0) {
          callback();
        } else {
          return callback(new Error("请输入整数！"));
        }
      }
    };
    return {
      formData: {},
      staffList: [],
      warehouseList: [],
      materialList: [],
      BOList: [{ num: "", materialId: "", price: "" }],
      rules: {
        warehouseId: [
          { required: true, message: "请选择仓库", trigger: ["change", "blur"] }
        ],
        purchaseOrderCode: [
          { required: true, message: "请选择采购订单", trigger: ["change", "blur"] }
        ],
        warehousingTime: [
          { required: true, message: "请选择入库时间", trigger: ["change", "blur"] }
        ],
        staffName: [
          { required: true, message: "请选择入库人", trigger: ["change", "blur"] }
        ],
      },
      showDialog: this.show
    };
  },
  computed: {
  },
  watch: {
    show(v) {
      this.showDialog = v;
    },
    nowChanceStau(v) {
      if (v === 'add') {
        this.formData = {
          staffName: sessionStorage.getItem('staffName'),
          warehousingTime: this.getNowTime()
        }
      }
      if (v === 'edit') {
        this.formData = this.editObject
        this.BOList = this.editObject.list
      }
    }
  },
  created() {
  },
  mounted() {
    this.queryWarehouse()
    this.queryStaff()
    this.queryMaterial()
    this.queryUncompleteOrder()
  },
  methods: {
    // 查询未完成订单
    queryUncompleteOrder(){

    },
    // MaterialApi查询物料
    queryMaterial(){
      let params = {
        page : 1,
        size : 100000
      }
      MaterialApi.queryPageByCondition(params).then(res=>{
        if (res.success) {
          this.materialList = res.data.content
        }
      })
    },
    // 查询仓库
    queryWarehouse(){
      let params = {
        page : 1,
        size : 1000
      }
      WarehouseApi.queryPageByCondition(params).then(res=>{
        if (res.success) {
          this.warehouseList = res.data.content;
        }
      })
    },
    // 查询员工
    queryStaff(){
      let params = {
        page : 1,
        size : 100000
      }
      StaffApi.queryPageByCondition(params).then(res=>{
        if (res.success) {
          this.staffList = res.data.content;
        }
      })
    },

    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          if (this.nowChanceStau === "edit") {
            WarehousingApi.edit(this.formData).then(res => {
              if (res.success === true) {
                this.$message.success("修改成功！");
                this.close()
              } else {
                this.$message.error(res.message);
              }
            });
          } else if (this.nowChanceStau === "add") {
            this.formData.list = this.BOList
            WarehousingApi.add(this.formData).then(res => {
              if (res.success === true) {
                this.$message.success("入库成功！");
                this.close()
              } else {
                this.$message.error(res.message);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    
    // 点击添加按钮
    addMaterial() {
      if (this.nowChanceStau === "edit") {
        let list = {
          materialId: "",
          num: "",
          price: ""
        };
        this.$set(this.BOList,this.BOList.length,list);
      }
      let list = {
        materialId: "",
        num: "",
        price: ""
      };
      this.$set(this.BOList,this.BOList.length,list);
      this.BOList = [...this.BOList];
    },
    // 删除改行
    delMaterial(index) {
      this.BOList.splice(index, 1);
    },
    close() {
      this.$emit("closeDialog");
      this.BOList =  [{ num: "", materialId: "", price: "" }]
    },
    cancel() {
      this.$emit("cancelDialog");
      this.BOList =  [{ num: "", materialId: "", price: "" }]
    }
  }
};
</script>

<style lang="scss" scoped>
.line-click {
  min-width: 30px;
  height: 30px;
  // background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  border: snow 1px solid;
  border-radius: 50%;
  margin-bottom: 10px;
  margin-top: 5px;
  margin-left: 5px;
  color: #fff;
  background-color: #003947;
  cursor: pointer;
}
.hang-content {
  width: 100%;
  .hang-content-one {
    width: 100%;
    display: flex;
  }
}
</style>
